<template>
	<div class="grade">
		<div class="grade-top">
			<h4>小众种草</h4>
			<aside>游侠客独一无二的旅行体验</aside>
		</div>
		<div class="grade-bottom swiper">
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="item in list" :key='item.id' :style="'background-image:url(\''+item.imgURL+'\')'">
					<h3>{{item.title}}</h3>
					<p>{{item.name}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	//2.引入Swiper的动态组件
	 import Swiper,{
		 Autoplay,
		 EffectCoverflow,
		 EffectCube,
		 Pagination,
	 } from 'swiper';
	 
	 //3.swier组件应用配置
	 Swiper.use([ Autoplay, EffectCoverflow, EffectCube, Pagination,])
	
	export default{
		name:'Grade',
		data(){
			return{
				list:[
					{id:1,imgURL:'/grzx/grade-1.jpg',title:'开路先锋',name:'探索无止境'},
					{id:2,imgURL:'/grzx/grade-2.jpg',title:'红叶季',name:'邂逅浪漫红叶'},
					{id:3,imgURL:'/grzx/grade-3.jpg',title:'蓝冰季',name:'邂逅梦幻蓝冰'},
					{id:4,imgURL:'/grzx/grade-4.jpg',title:'向野房车',name:'新型旅行方式'},
					{id:5,imgURL:'/grzx/grade-5.jpg',title:'徒步赏秋',name:'寻觅撩人秋色'},
					{id:6,imgURL:'/grzx/grade-6.jpg',title:'游侠人文',name:'诗江江南'}
				]
			}
		},
		setup(){
			onMounted(()=>{
				new Swiper('.grade-bottom',{
					 slidesPerView : 3,  
				})
			})
		}
	}
</script>

<style scoped>
	.grade{
		width: 95%;
		position: relative;
<<<<<<< HEAD
		height: 7rem;
=======
		height: 6rem;
>>>>>>> dfbcefb (游侠客项目)
		margin: 0 auto;
	}
	.grade .grade-top{
		display: flex;
		align-items: center;
		height: 1rem;
	}
	.grade .grade-top h4{
		font-size: 0.4rem;
		padding: 0.2rem 0.2rem;
		font-weight: bold;
	}
	.grade .grade-top aside{
		font-size: 0.3rem;
		background-color:#fff3ea;
		padding: 0.1rem 0.1rem;
		margin-left: 0.2rem;
		border-radius: 0.1rem;
		color: #ff9e51;
	}
	.grade .grade-bottom ul{
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.grade .grade-bottom ul li{
		margin: 0 0.07rem;
		width: 33%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-size: cover;
		height: 4.5rem;
		overflow: hidden;
	}
	.grade .grade-bottom ul li:nth-child(1){
		border-radius: 0.2rem 0 0 0.2rem;
	}
	.grade .grade-bottom ul li:nth-child(6){
		border-radius: 0 0.2rem 0.2rem 0;
		padding-right: 0.2rem;
	}
	.grade .grade-bottom ul li h3{
		font-size: 0.4rem;
		color: white;
		position: absolute;
		top: 3.5rem;
		left: 1.2rem;
		font-weight: bold;
	}
	.grade .grade-bottom ul li p{
		font-size: 0.3rem;
		color: white;
		position: absolute;
		top: 4.1rem;
		left: 1rem;
		font-weight: bold;
	}
</style>
